<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>量化控制台登录</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    * { box-sizing: border-box; }
    body { font-family: "Segoe UI", Arial, sans-serif; background: linear-gradient(135deg,#0b132b,#1c2541); color:#e0e0e0; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
    .wrap { width: 420px; }
    .brand { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
    .brand .logo { width:42px; height:42px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #5bc0be 0%, #3a506b 60%, #0b132b 100%); box-shadow:0 6px 18px rgba(91,192,190,0.35); }
    .brand .title { font-size:22px; font-weight:700; letter-spacing:1px; }
    .card { background:#111827; padding:24px; border-radius:14px; box-shadow:0 16px 36px rgba(0,0,0,0.45); border:1px solid rgba(90,110,140,0.35); }
    .field { margin-top:14px; }
    .label { display:block; margin-bottom:6px; color:#cbd5e1; font-size:14px; }
    .input { width:100%; height:44px; padding:10px 12px; border-radius:10px; border:1px solid #3a506b; background:#0b132b; color:#e0e0e0; outline:none; }
    .input:focus { border-color:#5bc0be; box-shadow:0 0 0 3px rgba(91,192,190,0.25); }
    .btn { width:100%; height:46px; margin-top:18px; border:none; border-radius:10px; background: linear-gradient(135deg,#5bc0be,#4db6ac); color:#0b132b; font-weight:800; letter-spacing:1px; cursor:pointer; }
    .btn:active { transform: translateY(1px); }
    .msg { margin-top:10px; color:#ffb703; min-height:20px; }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const form = document.getElementById('loginForm');
      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const fd = new FormData(form);
        const payload = { username: fd.get('username'), password: fd.get('password') };
        try {
          const r = await fetch('/api/quant/admin/login', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload) });
          if (r.status === 302 || r.ok) { window.location.href = '/api/quant/admin/home'; return; }
          const j = await r.json();
          document.getElementById('msg').textContent = j.detail || '登录失败';
        } catch(err){ document.getElementById('msg').textContent = '网络错误'; }
      });
    });
  </script>
</head>
<body>
  <div class="wrap">
    <div class="brand">
      <div class="logo"></div>
      <div class="title">量化控制台登录</div>
    </div>
    <div class="card">
      <form id="loginForm">
        <div class="field">
          <label class="label">用户名</label>
          <input class="input" type="text" name="username" value="admin" required />
        </div>
        <div class="field">
          <label class="label">密码</label>
          <input class="input" type="password" name="password" required />
        </div>
        <button class="btn" type="submit">登录</button>
        <div class="msg" id="msg"></div>
      </form>
    </div>
  </div>
</body>
</html>